<template>
  <div class="app-container">
    <!--查询-->
    <div class="my-bar">
      <el-button-group class="float-left">
        <el-button size="small" type="primary" icon="el-icon-edit" @click="onEdit()">新增</el-button>
      </el-button-group>
      <el-form :inline="true" class="float-right" size="small">
        <el-form-item v-if="isAdmin">
          <el-input v-model="getData.params.id" placeholder="请输入ID" clearable />
        </el-form-item>
        <!--自动生成搜索代码开始-->
        <el-form-item>
          <el-input v-model="getData.params.name" placeholder="请输入角色名" clearable />
        </el-form-item>
        <!--自动生成搜索代码结束-->
        <el-form-item>
          <el-button type="primary" @click="getListData"><i class="el-icon-search" /></el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--展示表格-->
    <el-table v-loading="listData.loading" :data="listData.data" element-loading-text="载入中..." border fit highlight-current-row>
      <!--自动生成表格代码开始-->
      <el-table-column :show-overflow-tooltip="true" align="center" prop="id" label="自增ID" />
      <el-table-column align="center" prop="rolePermList" label="角色权限列表">
        <template slot-scope="scope">
          <el-button size="mini" type="success" @click="$router.push({path: '/role/roleMenu?id=' + scope.row.id})">查看编辑</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="name" label="角色名" />
      <el-table-column align="center" prop="desc" label="角色说明" />
      <el-table-column align="center" prop="status" label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 1" size="mini">正常</el-tag>
          <el-tag v-if="scope.row.status == 0" size="mini">删除</el-tag>
        </template>
      </el-table-column>
      <!--自动生成表格代码结束-->
      <el-table-column align="center" fixed="right" label="操作" width="172px">
        <template slot-scope="scope">
          <el-button :disabled="loadings[scope.$index]" size="mini" type="primary" @click="onEdit(scope)">编辑</el-button>
          <el-dropdown size="small">
            <el-button :loading="loadings[scope.$index]" size="mini" type="primary">更多 <i class="el-icon-arrow-down" /></el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item divided @click.native="onCommand(scope, '删除')">删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <div class="my-bar">
      <el-pagination :page-size="getData.pageSize" :total="listData.total" class="float-right" layout="total, prev, pager, next" @current-change="onPageNum" />
    </div>
    <!--新增和编辑-->
    <el-dialog :title="popData.title" :visible.sync="popData.show">
      <el-form ref="formData" :model="formData" :rules="formRules" label-width="120px" size="small">
        <el-form-item label="角色名" prop="name" required>
          <el-input v-model="formData.name" placeholder="请输入角色名" maxlength="64" show-word-limit clearable />
        </el-form-item>
        <el-form-item label="角色说明" prop="desc">
          <el-input v-model="formData.desc" placeholder="请输入角色说明" type="textarea" maxlength="64" show-word-limit clearable />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="popData.show = false; popData.loading = false">取消</el-button>
        <el-button :loading="popData.loading" size="small" type="primary" @click="saveEvts">{{ popData.button }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import api from '@/api/service'
import { isAdmin } from '@/api/service'

export default {
  data() {
    return {
      func: api,
      bean: 'role.role',
      isAdmin: isAdmin(),
      popData: { show: false },
      getData: {
        pageNum: 1,
        pageSize: 10,
        params: {
        }
      },
      listData: {
        data: [],
        total: 0,
        loading: false
      },
      formRules: {
        name: [
          { max: 64, message: '长度最多 64 个字符', trigger: ['blur', 'change'] },
          { required: true, message: '请输入角色名', trigger: ['blur', 'change'] }
        ],
        desc: [
          { max: 64, message: '长度最多 64 个字符', trigger: ['blur', 'change'] }
        ]
      },
      formData: {},
      editForm: {
        // 需要赋值登录用户，如果是管理员需要选择客户
        clientId: ''
      },
      loadings: []
    }
  },
  mounted() {
    this.getListData()
  },
  methods: {
    getListData() {
      api.getListData(this.$data, data => {
      })
    },
    onPageNum(val) {
      this.getData.pageNum = val
      this.getListData()
    },
    onCommand(scope, command) {
      console.log(command, scope)
      if (command === '删除') {
        api.cmStatus(this, scope, 0, command)
      }
    },
    onEdit(scope) {
      api.onEdit(this.$data, scope)
      if (!this.formData.adminRoleList) {
        this.formData.adminRoleList = [{}]
      }
    },
    saveEvts() {
      api.saveEvts(this)
    }
  }
}
</script>
